// 
body {
	position: relative;
}

//确定版心
.Main {
	width: 1040px;
	margin: 0px auto;
}

// 头部
.Navigation {
	width: 100%;
	height: 28px;
	background: #545652;
	font-size: 12px;

	ul:nth-child(1) {
		float: left;

		li {
			line-height: 28px;
			float: left;
			list-style: none;

			a {
				text-decoration: none;
				color: #D5D5D5;
				padding: 0 12px;
			}
		}
	}

	ul:nth-child(2) {
		float: right;

		li {
			line-height: 28px;
			float: left;
			list-style: none;

			a {
				text-decoration: none;
				color: #D5D5D5;
				padding: 0 12px;
			}
		}
	}
}

// 头部搜索整体区域
.search {
	// 背景色
	background-color: #F0F3EF;
	// 下边框
	border-bottom: 1px solid #e5ebe4;

	// 版心
	.Main {
		height: 74px;
		display: flex;

		// Logo
		.songsLogo {
			margin-right: 30px;

			a {
				display: block;
				font-size: 0px;
				width: 145px;
				height: 56px;
				background-image: url('../images/logo.png');
				background-size: 150px 65px;
				background-position: -17px 6px;
			}
		}

		// 搜索框
		.searchinput {
			width: 895px;
			height: 34px;
			margin-top: 22px;
			display: flex;

			// 搜索框
			input {
				width: 470px;
				height: 30px;
				border: none;
				border-bottom: 2px solid #DDDDDD;
				border-radius: 3px 0px 0px 3px;
				padding-left: 10px;
				outline: none;
			}

			// 搜索按钮
			li {
				display: block;
				width: 37px;
				height: 32px;
				background-color: #9BA39B;
				border-radius: 0px 3px 3px 0px;

			}
		}
	}
}

// 导航区域
.topNav {
	height: 40px;
	background-color: #F0F3EF;
	margin-bottom: 40px;

	ul {
		display: flex;

		li {
			margin-right: 30px;

			a {
				font-size: 14px;
				color: #555d35;
				line-height: 40px;

				&:hover {
					color: #000;
					text-decoration: none;
					background-color: #545652;
					font-weight: 600;
					color: whitesmoke !important;
				}
			}

		}
	}
}

// 2019 年度榜单
.songLogo {
	position: absolute;
	top: 38px;
	right: 180px;

	img {
		width: 166px;
		height: 96px;
	}
}

// 主题区域


// 轮播图
.swiper {
	img {
		width: 675px;
		height: 250px;
	}
}

// 排行榜1
.ranking1 {
	margin-top: 35px;

	span {
		display: block;
		width: 675px;
		height: 32px;

		a {
			float: left;
			font-size: 14px;
			line-height: 30px;
			color: #999;
		}
	}

	.rankingContent {
		width: 645px;
		height: 415px;
		border-top: 2px solid green;
		background: #F5F7F8;
		padding: 15px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;

		div {
			width: 135px;
			height: 135px;

			img {
				width: 125px;
				height: 125px;
				margin: 5px;
			}

			a {
				display: block;
				text-align: center;
				font-weight: bold;
				font-size: 15px;
				color: #138A64;
				margin: 3px 0px 0px;
			}
		}
	}
}

// 排行榜2
.ranking2 {
	margin-top: 35px;

	.title {
		display: flex;

		span {
			color: #222222;
			font-size: 17px;
			margin-right: 17px;
		}

		ul {
			display: flex;

			li {
				font-size: 13px;
				margin-right: 2px;
			}
		}
	}

	.rankingContent {
		width: 645px;
		height: 415px;
		border-top: 2px solid green;
		background: #F5F7F8;
		padding: 15px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;

		div {
			width: 135px;
			height: 135px;

			img {
				width: 125px;
				height: 125px;
				margin: 5px;
			}

			a {
				display: block;
				text-align: center;
				font-weight: bold;
				font-size: 15px;
				color: #138A64;
				margin: 3px 0px 0px;
			}
		}
	}
}

// 排行榜3
.ranking3 {
	margin-top: 35px;

	.title {
		display: flex;

		span {
			color: #222222;
			font-size: 17px;
			margin-right: 17px;
		}

		ul {
			display: flex;

			li {
				font-size: 13px;
				margin-right: 2px;
			}
		}
	}

	.rankingContent {
		width: 645px;

		border-top: 2px solid green;
		background: #F5F7F8;
		padding: 15px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;

		div {
			width: 300px;
			height: 180px;
			margin: 0px 15px 15px 0px;
			background-color: red;
		}
	}
}



#right {
	.top {
		display: flex;

		div {
			width: 48px;
			height: 42px;
			background-color: #F5F7F8;
			margin-right: 3px;
			padding: 15px 25px 0px 25px;

			p {
				font-size: 17px;
				font-weight: bold;
				line-height: 15px;
				color: #138A64;
			}

			span {
				width: 100%;
				display: block;
				font-size: 15px;
				margin-top: 5px;
				text-align: center;
				color: #666;
			}

		}
	}

	.bot {
		background-color: #139D72;
		width: 300px;
		height: 38px;
		color: #FFF;
		display: block;
		font-size: 17px;
		text-align: center;
		line-height: 38px;
		margin-top: 3px;
		border: 1px solid #138A64;
	}

	.songsTypes {
		margin-top: 20px;

		span {
			font-size: 15px;
			color: #222;
			margin-bottom: 3px;
		}

		ul {
			width: 300px;
			height: 222px;
			border-bottom: 1px solid #F8F6F6;

			li {
				float: left;

				a {
					display: block;
					width: 141px;
					height: 36px;
					line-height: 36px;
					display: block;
					border-top: 1px solid #F8F6F6;
					border-right: 1px solid #F8F6F6;
					color: #138A64;
					font-size: 15px;
					padding-left: 6px;

					&:hover {
						text-decoration: none;
						background-color: rgb(245, 247, 248);
						color: #138A64 !important;
					}
				}
			}
		}
	}

	// 本周单曲排行
	.weekRanking {
		margin-top: 20px;

		.weekRankingTitle {
			border-bottom: 1px solid #E4E2E2;
			padding-bottom: 5px;
			margin-bottom: 10px;

			span {
				font-size: 15px;
				color: #222;
				margin-bottom: 3px;
			}

			button {
				background: #139D72;
				border: 1px solid #138A64;
				border-radius: 3px;
				font-size: 13px;
				color: #FFF;
				line-height: 24px;
				width: 88px;
				height: 23px;
				display: inline-block;
				text-align: center;
				float: right;
			}
		}

		.classification {
			display: flex;

			li {
				font-size: 13px;
				margin-right: 4px;
			}
		}

		.playsongs {
			ul {
				li {
					height: 50px;
					margin: 5px 0px;

					img {
						width: 48px;
						height: 48px;
						border-radius: 50%;
						margin-right: 10px;
					}

					span {
						display: inline-block;
						font-size: 20px;
						line-height: 48px;
						vertical-align: middle;
						margin-top: -40px;
					}
				}
			}
		}
	}
}